<script setup lang="ts">
  import { ref, defineEmits, computed, watch, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { searchByPage } from '@/api/sorting-matching';

  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  // 表单查询数据

  const startPlaneNo = ref('');
  const productCode = ref('');
  const batchNo = ref('');
  const startTime = ref('');
  const endTime = ref('');

  const pageSize = ref(30);
  const pageNumber = ref(1);

  // 发送搜索数据
  const flowQueryData = ref({
    searchParams: computed(() => ({
      startPlaneNo: startPlaneNo.value,
      productCode: productCode.value,
      batchNo: batchNo.value,
    })),
    pageParameter: computed(() => ({
      rows: pageSize.value,
      page: pageNumber.value,
    })),
    startTime: computed(() => startTime.value),
    endTime: computed(() => endTime.value),
  });
  // 表格数据

  async function handleSearch() {
    const newData = await searchByPage(flowQueryData.value);
    emit('updateArray', newData);
  }

  // 重置
  function reset() {
    startPlaneNo.value = '';
    productCode.value = '';
    handleSearch();
  }
  onMounted(() => {
    handleSearch();
  });
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 13) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">查询条件</div>
    </template>
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-input
            v-model="productCode"
            placeholder="机型"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input
            v-model="batchNo"
            placeholder="批次"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-input
            v-model="startPlaneNo"
            placeholder="起始架次"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <div>
          <a-date-picker
            v-model="startTime"
            style="width: 100%"
            placeholder="开始时间"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
    </a-row>
    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-date-picker
            v-model="startTime"
            style="width: 100%"
            placeholder="结束时间"
            size="large"
            allow-clear
          />
        </div>
      </a-col>
      <a-col :span="6">
        <a-button type="primary" size="large" @click="handleSearch"
          >查询</a-button
        >
        <a-button class="btn-reset" size="large" @click="reset"
          >重置搜索框</a-button
        >
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
  .margin-top {
    margin-top: 10px;
  }
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .div-tips {
    align-items: center;
    text-align: center;
    color: #999;
  }
</style>
